<template>
  <div id="app">
    <router-view :toast="toast" class="view"></router-view>
    <div v-for="toast in option.toasts" :key="toast.key" class="toast">{{toast.text}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data:function(){
  	return {
  		option:{
  			toasts:[],
	  		timeout:null,
	  		keys:0
  		}
  	}
  },
  methods:{
  	toast(text){
  		let {toasts,timeout,keys} = this.option;
  		if(timeout){
  			clearTimeout(timeout);
  			toasts.shift();
  		}
  		toasts.push({text,key:keys++});
  		this.option = {keys,toasts,timeout};
  		timeout = setTimeout(()=>{
  			toasts.shift();
  		},6000);
  	}
  },
  mounted(){

  },
  created () {
	  this.$store.commit({
	    type: 'getLocalUser'
	  })
  }
}
</script>

<style lang="scss" >
@import url("assets/style/base.scss");



</style>
